<template>
    <div class="zhengti">
  <el-upload class="upload"
                drag 
                 ref="upload"
                 action="string"
                 :file-list="fileList"	
                 :auto-upload="false"	
                 :http-request="uploadFile"	
                 :on-change="handleChange"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 list-type="file"
                 multiple="multiple">	
                 <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
            </div>
      </el-upload>
    <el-button id="class_submit_button" type="primary" @click="onSubmit" style="display">保存</el-button>

  <div style="">
    <div style="">
      <el-table 
    :data="useCase_list"
    border
    >
    <el-table-column
      prop="actorName"
      label="角色名"
      width="195">
    </el-table-column>
    <el-table-column
      prop="useCaseNameList"
      label="用例"
      width="790">
    </el-table-column>
  </el-table>

    <el-descriptions class="margin-top" title="统计结果" :column="3" :size="size" border>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        角色数量
      </template>
      {{totalActorNum}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        用例数量
      </template>
       {{totalUseCaseNum}}
    </el-descriptions-item>
    
  </el-descriptions>

    </div>
</div>


  <el-table :data="tabledatas" border>
            <el-table-column label="简单角色个数">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.simple"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.simple}}</span>
                </template>
            </el-table-column>
            <el-table-column label="普通角色个数">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.common"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.common}}</span>
                </template>
            </el-table-column>
            <el-table-column label="复杂角色个数">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.complex"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.complex}}</span>
                </template>
            </el-table-column>
            <el-table-column label="该用例图的UAW">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.uaw"></el-input>
                    <span v-show=true>{{scope.row.uaw}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="scope.row.show =true">编辑</el-button>
                    <el-button @click="cal_uaw(scope.row)">保存</el-button>
                </template>
            </el-table-column>
        </el-table>
  


   <el-table :data="tabledatas_uuc" border>
            <el-table-column label="简单用例个数">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.simple"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.simple}}</span>
                </template>
            </el-table-column>
            <el-table-column label="普通用例个数">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.common"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.common}}</span>
                </template>
            </el-table-column>
            <el-table-column label="复杂用例个数">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.complex"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.complex}}</span>
                </template>
            </el-table-column>
            <el-table-column label="该用例图的UUC">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.uuc"></el-input>
                    <span v-show=true>{{scope.row.uuc}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="scope.row.show =true">编辑</el-button>
                    <el-button @click="cal_uuc(scope.row)">保存</el-button>
                </template>
            </el-table-column>
        </el-table>

 
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="TCF计算" name="first">
      
<el-table :data="tabledatas_TFactor" border>
            <el-table-column label="因子序号">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.Ti"></el-input>
                    <span v-show=true>{{scope.row.Ti}}</span>
                </template>
            </el-table-column>
            <el-table-column label="因子描述">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.description"></el-input>
                    <span v-show=true>{{scope.row.description}}</span>
                </template>
            </el-table-column>
            <el-table-column label="权重">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.weight"></el-input>
                    <span v-show=true>{{scope.row.weight}}</span>
                </template>
            </el-table-column>
            <el-table-column label="值">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.value"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.value}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="scope.row.show =true">编辑</el-button>
                    <el-button @click="cal_TFactor(scope.row)">保存</el-button>
                </template>
            </el-table-column>
        </el-table>


    </el-tab-pane>
    <el-tab-pane label="EF计算" name="second">
      
      <el-table :data="tabledatas_EF" border>
            <el-table-column label="因子序号">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.Ti"></el-input>
                    <span v-show=true>{{scope.row.Ti}}</span>
                </template>
            </el-table-column>
            <el-table-column label="因子描述">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.description"></el-input>
                    <span v-show=true>{{scope.row.description}}</span>
                </template>
            </el-table-column>
            <el-table-column label="权重">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.weight"></el-input>
                    <span v-show=true>{{scope.row.weight}}</span>
                </template>
            </el-table-column>
            <el-table-column label="值">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.value"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.value}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="scope.row.show =true">编辑</el-button>
                    <el-button @click="cal_EF(scope.row)">保存</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-tab-pane>

  </el-tabs>
        <!--结果展示-->
        <el-descriptions class="margin-top" title="计算结果" :column="4" :size="size" border>
             <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        UCP
      </template>
      {{UCP}}
    </el-descriptions-item>
            <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        UUCP
      </template>
      {{UUCP}}
    </el-descriptions-item>
        <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        TCF
      </template>
      {{TCF}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        EF
      </template>
      {{EF}}
    </el-descriptions-item>
    </el-descriptions>

        
    


</div>

</template>

<!-- <script src="assets/js/axios.min.js"></script> -->

<script>
module.exports = {
    data:function(){
    return{
	// el-upload组件绑定的属性—— :file-list=“fileList”,渲染后fileList[index]是Object类型,而不是后台所需的File类型,
      // 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好.
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: "",


      //下面是表格需要的数据
      activeName: 'first',
      filename:"",
      class_ck:[],
      class_lk:[],

      useCase_list:[],
      totalActorNum:0,
      totalUseCaseNum:0,

      TCF:0,
      EF:0,
      UUCP:0,
      UCP:0,
      UAW:0,
      UUC:0,
      activeName: 'first',


                tabledatas: [
                    { simple: 0, common:0,complex:0,uaw:0,show:false}, //这里的show是指是否开启编辑，simple是第一列，common是第二列
                ],
                
                tabledatas_uuc: [
                    { simple: 0, common:0,complex:0,uuc:0,show:false}, //这里的show是指是否开启编辑，simple是第一列，common是第二列
                ],
                tabledatas_TFactor: [
                    { Ti: "T1", description:"分布式系统",weight:2,value:0,show:false}, 
                    { Ti: "T2", description:"响应或吞吐量性能",weight:1,value:0,show:false}, 
                    { Ti: "T3", description:"终端用户效率",weight:1,value:0,show:false}, 
                    { Ti: "T4", description:"复杂的内部结构",weight:1,value:0,show:false}, 
                    { Ti: "T5", description:"代码必须重用",weight:1,value:0,show:false}, 
                    { Ti: "T6", description:"易安装性",weight:0.5,value:0,show:false}, 
                    { Ti: "T7", description:"易用性",weight:0.5,value:0,show:false}, 
                    { Ti: "T8", description:"可移植性",weight:2,value:0,show:false}, 
                    { Ti: "T9", description:"已更改性",weight:1,value:0,show:false}, 
                    { Ti: "T10", description:"并发性",weight:1,value:0,show:false}, 
                    { Ti: "T11", description:"特殊的安全性",weight:1,value:0,show:false}, 
                    { Ti: "T12", description:"提供第三方接口",weight:1,value:0,show:false}, 
                    { Ti: "T13", description:"需要特别的用户培训",weight:1,value:0,show:false}, 

                ],
                tabledatas_EF: [
                    { Ti: "F1", description:"熟悉UML的程度",weight:1.5,value:0,show:false}, 
                    { Ti: "F2", description:"开发应用程序的经验",weight:0.5,value:0,show:false}, 
                    { Ti: "F3", description:"面向对象的经验",weight:1,value:0,show:false}, 
                    { Ti: "F4", description:"主分析师的能力",weight:0.5,value:0,show:false}, 
                    { Ti: "F5", description:"激励机制",weight:1,value:0,show:false}, 
                    { Ti: "F6", description:"需求稳定度",weight:2,value:0,show:false}, 
                    { Ti: "F7", description:"具有兼职人员",weight:-1,value:0,show:false}, 
                    { Ti: "F8", description:"具有复杂编程",weight:-1,value:0,show:false}, 
                   

                ],
    }
},
methods:{
  handleClick(tab, event) {
        console.log(tab, event);
      },

  cal_uaw(row){
                row.show = false;
                console.log("计算uaw")
                this.tabledatas[0].uaw=1*this.tabledatas[0].simple+2*this.tabledatas[0].common+3*this.tabledatas[0].complex
                this.UAW=this.tabledatas[0].uaw
                this.UUCP=this.UAW+this.UUC
        },
    cal_uuc(row){
                row.show = false;
                console.log("计算uuc")
                this.tabledatas_uuc[0].uuc=5*this.tabledatas_uuc[0].simple+10*this.tabledatas_uuc[0].common+15*this.tabledatas_uuc[0].complex
                this.UUC=this.tabledatas_uuc[0].uuc
                this.UUCP=this.UAW+this.UUC
        },
        cal_TFactor(row){
                row.show = false;
                console.log("计算tcf")
                var TFactor=this.tabledatas_TFactor[0].weight*this.tabledatas_TFactor[0].value+
                this.tabledatas_TFactor[1].weight*this.tabledatas_TFactor[1].value+
                this.tabledatas_TFactor[2].weight*this.tabledatas_TFactor[2].value+
                this.tabledatas_TFactor[3].weight*this.tabledatas_TFactor[3].value+
                this.tabledatas_TFactor[4].weight*this.tabledatas_TFactor[4].value+
                this.tabledatas_TFactor[5].weight*this.tabledatas_TFactor[5].value+
                this.tabledatas_TFactor[6].weight*this.tabledatas_TFactor[6].value+
                this.tabledatas_TFactor[7].weight*this.tabledatas_TFactor[7].value+
                this.tabledatas_TFactor[8].weight*this.tabledatas_TFactor[8].value+
                this.tabledatas_TFactor[9].weight*this.tabledatas_TFactor[9].value+
                this.tabledatas_TFactor[10].weight*this.tabledatas_TFactor[10].value+
                this.tabledatas_TFactor[11].weight*this.tabledatas_TFactor[11].value+
                this.tabledatas_TFactor[12].weight*this.tabledatas_TFactor[12].value
                
                this.TCF=0.6+(0.01*TFactor)

                this.UCP=this.UUCP*this.TCF*this.EF

        },
        cal_EF(row){
                row.show = false;
                console.log("计算ef")
                var EFactor=this.tabledatas_EF[0].weight*this.tabledatas_EF[0].value+
                this.tabledatas_EF[1].weight*this.tabledatas_EF[1].value+
                this.tabledatas_EF[2].weight*this.tabledatas_EF[2].value+
                this.tabledatas_EF[3].weight*this.tabledatas_EF[3].value+
                this.tabledatas_EF[4].weight*this.tabledatas_EF[4].value+
                this.tabledatas_EF[5].weight*this.tabledatas_EF[5].value+
                this.tabledatas_EF[6].weight*this.tabledatas_EF[6].value+
                this.tabledatas_EF[7].weight*this.tabledatas_EF[7].value
                
                
                this.EF=1.4+(-0.03*EFactor)

                this.UCP=this.UUCP*this.TCF*this.EF



        },

        
//点击上传文件触发的额外事件,清空fileList
delFile :function () {
      this.fileList = [];
    },
    handleChange :function (file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList, "sb");
    },
    //自定义上传文件
    uploadFile :function (file) {
      this.formData.append("file", file.file);
      // console.log(file.file, "sb2");
    },
    //删除文件
    handleRemove :function (file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件
    handlePreview :function (file) {
      console.log(file);
    },

    //分页的点击函数
   handleClick(tab, event) {
        console.log(tab, event);
      },
    //保存按钮
    onSubmit :function() {

        this.filename=this.fileList[0].name
        console.log(this.filename)

        console.log("保存文件")
        let formData = new FormData();
        formData.append("oomFile", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
       //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
        formData.append("title", this.title);
        axios.post("http://localhost:8080/api/UseCase/useCase", formData, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
            this.useCase_list = res.data.data.useCaseActors
            this.totalActorNum = res.data.data.totalActorNum
            this.totalUseCaseNum = res.data.data.totalUseCaseNum

this.useCase_list.forEach((item) => {
  const useCaseNameList = item.useCaseNameList;
  const lastIndex = useCaseNameList.length - 1;
  useCaseNameList.forEach((name, index) => {
    if (index !== lastIndex) {
      useCaseNameList[index] = name + ",";
    }
  });
});


            console.log( this.useCase_list)

        })

        // //以下是表格数据展示
        // //ck
        // var ck_url = "http://localhost:8080/api/ck/ck?s="+this.filename
        // axios.post(ck_url).then((res)=>{
        //         this.class_ck = res.data.data
        //         console.log(this.class_ck)

        //         console.log(this.class_ck[0].name)

			    
			  //   })
        

        // //lk
        // var lk_url = "http://localhost:8080/api/lk/lk?s="+this.filename
        // axios.post(lk_url).then((res)=>{
        //         this.class_lk = res.data.data
        //         console.log(this.class_lk)

        //         console.log(this.class_lk[0].name)
                
			    
			  //   })


    
    }
}
    



}
</script>

<style>
/*提交按钮跟上下保持距离*/
#class_submit_button{
  margin-top: 10px;
  margin-bottom: 10px;
}

.zhengti {
    text-align: center;

}


</style>